<template>
  <el-dialog v-model="dialogVisible" title="订单确认" width="800" overflow>
    <div>
      <el-form
        ref="ruleFormRef"
        :model="form"
        label-width="150px"
        :rules="rulesForStepOne"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="云采附件" style="width: 100%" />
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item
              label="订单确认"
              style="width: 100%"
              prop="auditStatus"
            >
              <el-radio-group v-model="form.auditStatus">
                <el-radio value="2" size="large">通过</el-radio>
                <el-radio value="3" size="large">驳回</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="确认说明" style="width: 100%">
              <el-input
                v-model="form.auditReason"
                :rows="2"
                type="textarea"
                placeholder="请输入 确认说明"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="附件" style="width: 100%">
              <el-upload
                v-model:file-list="form.Files"
                class="upload-demo"
                :action="uploadUrl"
                :headers="headers"
                multiple
                :on-preview="handlePreview"
                :on-success="handleSuccess"
                :limit="3"
              >
                <el-button :icon="Upload" color="#1E3485"> 点击上传</el-button>
                <template #tip>
                  <div class="el-upload__tip">(注：请下载云采附件，并盖章)</div>
                </template>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" color="#1E3485" @click="rules(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { reactive, ref, watch, onMounted } from "vue";
import { ElDialog, ElMessage } from "element-plus";
import { headers, uploadUrl, getDictDetail } from "@/api/utils";
import type { UploadProps, UploadUserFile, UploadFile } from "element-plus";
import { Search, Upload } from "@element-plus/icons-vue";
import { updatecommitAudit } from "@/api/ERP_OrderManage";
import type { ComponentSize, FormInstance, FormRules } from "element-plus";
// 弹窗关闭/打开事件
const props = defineProps({
  visible: Boolean
});

const form = reactive({
  id: "",
  auditStatus: "2",
  auditReason: "",
  Files: [],
  auditFileUrl: ""
});

const ruleFormRef = ref<FormInstance>();
const dialogVisible = ref(false);
//const formLabelWidth = "140px";

//上传
const fileList = ref<UploadUserFile[]>([]);
const contractFileList: any = [];
const filePreviewDialogVisible = ref(false);
const fileUrl = ref("");

const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles);
};

const handlePreview: UploadProps["onPreview"] = (uploadFile: UploadFile) => {
  if (uploadFile.response) {
    const response = uploadFile.response as unknown as any;
    window.open(response.data.url, "_blank");
  } else {
    window.open(uploadFile.url, "_blank");
  }
};

// 文件上传成功,传参赋值，格式修改
const handleSuccess = (fileList: any) => {
  contractFileList.push(fileList.data);
  const formatterObj = [];
  for (let i in contractFileList) {
    let tempvalue: any = {};
    tempvalue.fileUrl = contractFileList[i].url;
    tempvalue.fileSuffix =
      "." +
      contractFileList[i].name.substring(
        contractFileList[i].name.lastIndexOf(".") + 1
      );
    tempvalue.fileOriginName = contractFileList[i].name;
    formatterObj.push(tempvalue);
  }
  form.auditFileUrl = JSON.stringify(formatterObj);
};

const rulesForStepOne = reactive({
  auditStatus: [{ required: true, message: "请选择订单确认", trigger: "blur" }]
});

const rules = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      update();
    } else {
      console.log("error submit!", fields);
    }
  });
};

//保存/编辑事件
const update = async () => {
  let data: any = {};
  data.id = form.id;
  data.auditStatus = form.auditStatus;
  data.auditReason = form.auditReason;
  data.auditFileUrl = form.auditFileUrl;
  const all = await updatecommitAudit(data).then((response: any) => {
    if (response.code == 200) {
      dialogVisible.value = false;
      ElMessage({
        message: "订单确认成功",
        type: "success"
      });
      //history.back();
    }
    console.log(response);
  });
};

watch(
  () => props.visible,
  val => {
    dialogVisible.value = val;
    // form.id = props.yclist.id;
  },
  { immediate: true }
);
</script>
